<!--
  智慧社区管理系统 - 投诉详情弹窗组件
  @author Wu.Liang
  @date 2025-06-26
  @version 3.0 - 根据系统设计调整方案重构
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="投诉详情"
    width="800px"
    :close-on-click-modal="false"
  >
    <div v-if="complaintData" class="complaint-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="工单号">{{ complaintData.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="投诉标题">{{ complaintData.title }}</el-descriptions-item>
          <el-descriptions-item label="投诉分类">
            <el-tag :type="getCategoryTagType(complaintData.categoryId)">
              {{ complaintData.categoryName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityTagType(complaintData.priority)">
              {{ getPriorityText(complaintData.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag :type="getStatusTagType(complaintData.status)">
              {{ getStatusText(complaintData.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="投诉人">{{ complaintData.userName }}</el-descriptions-item>
          <el-descriptions-item label="所属社区">{{ complaintData.communityName }}</el-descriptions-item>
          <el-descriptions-item label="处理人员">{{ complaintData.assigneeName || '未分配' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDate(complaintData.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="分配时间" :span="2">
            {{ complaintData.assignTime ? formatDate(complaintData.assignTime) : '未分配' }}
          </el-descriptions-item>
          <el-descriptions-item label="解决时间" :span="2">
            {{ complaintData.resolveTime ? formatDate(complaintData.resolveTime) : '未解决' }}
          </el-descriptions-item>
          <el-descriptions-item label="投诉内容" :span="2">
            <div class="content-text">{{ complaintData.content }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 满意度评价 -->
      <el-card v-if="complaintData.satisfaction" class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>满意度评价</span>
          </div>
        </template>
        
        <div class="satisfaction-section">
          <el-rate
            v-model="complaintData.satisfaction"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value} 分"
          />
        </div>
      </el-card>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="complaintData?.status === 1"
          type="success"
          @click="handleAssign"
        >
          分配
        </el-button>
        <el-button
          v-if="complaintData?.assigneeId && complaintData?.status !== 4"
          type="warning"
          @click="handleProcess"
        >
          处理
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Complaint } from '../types/complaint'

// 作者: Wu.Liang

// Props
interface Props {
  modelValue: boolean
  complaintData: Complaint | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'assign': [complaint: Complaint]
  'process': [complaint: Complaint]
}>()

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 工具方法
const getCategoryTagType = (categoryId: number) => {
  const typeMap: { [key: number]: string } = {
    1: 'primary',
    2: 'success',
    3: 'warning',
    4: 'danger'
  }
  return typeMap[categoryId] || 'info'
}

const getPriorityTagType = (priority: number) => {
  const typeMap: { [key: number]: string } = {
    1: 'info',
    2: 'success',
    3: 'warning',
    4: 'danger'
  }
  return typeMap[priority] || 'info'
}

const getPriorityText = (priority: number) => {
  const textMap: { [key: number]: string } = {
    1: '低',
    2: '中等',
    3: '高',
    4: '紧急'
  }
  return textMap[priority] || '未知'
}

const getStatusTagType = (status: number) => {
  const typeMap: { [key: number]: string } = {
    1: 'warning',
    2: 'primary',
    3: 'info',
    4: 'success',
    5: 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status: number) => {
  const textMap: { [key: number]: string } = {
    1: '待受理',
    2: '已受理',
    3: '处理中',
    4: '已完成',
    5: '已关闭'
  }
  return textMap[status] || '未知'
}

const formatDate = (date: string) => {
  if (!date) return ''
  return new Date(date).toLocaleString()
}

// 事件处理
const handleClose = () => {
  dialogVisible.value = false
}

const handleAssign = () => {
  if (props.complaintData) {
    emit('assign', props.complaintData)
  }
}

const handleProcess = () => {
  if (props.complaintData) {
    emit('process', props.complaintData)
  }
}
</script>

<style scoped>
.complaint-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.content-text {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #606266;
}

.satisfaction-section {
  padding: 10px 0;
}

.dialog-footer {
  text-align: right;
}
</style> 